<template>
	<div class="content">
		
		<el-steps :active="1" align-center>
		  <el-step title="查询信息" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="制作印章" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="上传文件" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="签署文件" description="这是一段很长很长很长的描述性文字"></el-step>
		</el-steps>
		
		<!-- 内容 -->
		<div class="div_content">
		  <div class="div_content_left" style="width: 60%;">
			  <div class="div_from base_br">
				  <div class="div_item__label">
					  接入商标识(accessKey):
				  </div>
				  <div class="div_item__input">
					<el-input v-model="input_bz" placeholder="请输入接入商标识"></el-input>
				  </div>
			  </div>
			  <div class="div_from base_br">
				  <div class="div_item__label">
					  接入商密钥(accessValue):
				  </div>
				  <div class="div_item__input">
					<el-input v-model="input_pwd" placeholder="请输入接入商密钥"></el-input>
				  </div>
			  </div>
			  <div class="base_br">
				  <el-button type="primary" @click="testPost">查询接入商信息</el-button>
			  </div>
			  <div class="base_br" align="left">
				  <!--
				  json美化的组件Api地址
				  https://github.com/chenfengjw163/vue-json-viewer/blob/master/README_CN.md -->
				  <json-viewer :value="showtext" :expand-depth="4" copyable sort ></json-viewer>
			  </div>
		  </div>
		  <div class="div_content_right" align="left">
			  注释：
		  </div>
		  
		</div>		 
	</div>
</template>

<script>
	
	
	export default {
		components: {
		},
		data() {
			return {
				input_bz:'',//接入标识码
				input_pwd:'',//接入密钥码
				showtext: '结果集显示'//结果集显示
			}
		},
	  methods:{
		  
		//测试post请求
		testPost(){
			//post
			var _this=this;
			this.$http.post('/access/selectAccessInfo',{
						accessValue:_this.input_pwd,
				accessKey:_this.input_bz
			}).then((res)=>{
						console.log(res.data);
						_this.showtext =res.data;
			}).catch((err)=>{
			   alert("请求失败") 
			})
			
		},
		
		
	  }
	}
</script>

<style scoped>
	/* 中间内容显示 */
	.content{
		padding: 20px;
	}
	
	.div_content{
		display: flex;
		justify-content: space-between;
		margin: 20px;
		padding: 20px;
	}
	.div_content_left{
		width: 70%;
		margin-left: 15px;
		margin-right: 15px;
	}
	.div_content_right{
		width: 30%;
		margin-bottom: 15px;
		margin-left: 15px;
		margin-right: 15px;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 15px;
		height: auto;
		background-color: #FFFFFF;
		
	}
	
	.base_br{
		margin-bottom: 20px;
	}
	.div_from{
		display: flex;
		justify-content: space-between;
	}
	
	.div_item__label{
		width: 30%;
		text-align: right;
		vertical-align: middle;
		float: left;
		font-size: 16px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		box-sizing: border-box;
		
	}
	.div_item__input{
		width: 70%;
	}
</style>
